<!DOCTYPE html>
<html style="height: 100%">
   <head>
       <meta charset="utf-8">
       <style type="text/css">
           .cldBody{width: 18%;margin: 5px;float: left;}
           .cldBody .top{height: 20px;line-height: 20px;text-align: center;position: relative;}
           #week td{font-size: 15px;}
           td{width: 20px; height: 20px;line-height: 20px;text-align: center;font-size: 10px;}
           #tbody td:hover{background: #ededed;cursor: pointer;}
           .rili_box{border:1px solid #E9E9E9;}
           .red{background-color: #ff5346;}
           .yellow{
               background: #facd2f;
           }
           .green{
               background: #36cea5;
           }
           .blue{
               background: #3fc4fc;
           }
           .empty{
               background: #d0caca;
           }
       </style>
   </head>
   <body>
   <div class="cldBody">
       <table class="rili_box">
           <thead>
           <tr id="week" >
               <td>日</td>
               <td>一</td>
               <td>二</td>
               <td>三</td>
               <td>四</td>
               <td>五</td>
               <td>六</td>
           </tr>
           </thead>
           <tbody id="tbody0" ></tbody>
       </table>
   </div>
   <div class="cldBody">
       <table class="rili_box">
           <thead>
           <tr id="week" >
               <td>日</td>
               <td>一</td>
               <td>二</td>
               <td>三</td>
               <td>四</td>
               <td>五</td>
               <td>六</td>
           </tr>
           </thead>
           <tbody id="tbody1" ></tbody>
       </table>
   </div>
   <div class="cldBody">
       <table class="rili_box">
           <thead>
           <tr id="week" >
               <td>日</td>
               <td>一</td>
               <td>二</td>
               <td>三</td>
               <td>四</td>
               <td>五</td>
               <td>六</td>
           </tr>
           </thead>
           <tbody id="tbody2" ></tbody>
       </table>
   </div>
   <div class="cldBody">
       <table class="rili_box">
           <thead>
           <tr id="week" >
               <td>日</td>
               <td>一</td>
               <td>二</td>
               <td>三</td>
               <td>四</td>
               <td>五</td>
               <td>六</td>
           </tr>
           </thead>
           <tbody id="tbody3" ></tbody>
       </table>
   </div>
   <div class="cldBody">
       <table class="rili_box">
           <thead>
           <tr id="week" >
               <td>日</td>
               <td>一</td>
               <td>二</td>
               <td>三</td>
               <td>四</td>
               <td>五</td>
               <td>六</td>
           </tr>
           </thead>
           <tbody id="tbody4" ></tbody>
       </table>
   </div>
<!--   <script src="${ctxStatic}/jquery/jquery-1.12.4.min.js"></script>-->
   <script src="http://mysite.com/jeesite_web_war_exploded/static/jquery/jquery-1.12.4.min.js"></script>
   <script>
       var date = new Date();
       var year = date.getFullYear();
       var nowyear = date.getFullYear();
       var month = date.getMonth()+1;
       var nowmonth = date.getMonth()+1;
       var dateday = date.getDate();
       // var todateHtml = year + '年'+ month + '月';
       // $('#topDate').text(todateHtml)
       function showcld(index){
           var monthDay = [31,28,31,30,31,30,31,31,30,31,30,31];  // 创建数组存放每个月有多少天 ,默认2月为28天
           // 判断闰年
           if(year % 4 == 0 && year %100 != 0 || year % 400 == 0){
               monthDay[1] = 29;
           }
           // 计算每个月的天数
           var days = monthDay[month-1];
           // 判断每月第一天为周几
           date.setYear(year);        //某年
           date.setMonth(month-1);   //某年的某月
           date.setDate(1);   // 某月的某天
           var weekday = date.getDay();  // 判断某天是周几
           // 补齐一号前的空格
           var tbodyHtml = '<tr>';
           for(var i = 0; i<weekday; i++){
               tbodyHtml += "<td></td>";
           }
           // 补齐每月的日期
           var changLine = weekday;
           var tagClass = '';
           for(i=1; i<=days; i++){//每一个日期的填充
               if(year == nowyear && month == nowmonth && i == dateday) {
                   tagClass = "red";//当前日期对应格子
               }else{
                   tagClass = "empty";
               }
               tbodyHtml += "<td class=" + tagClass + ">" + i + "</td>";
               changLine = (changLine+1)%7;
               if(changLine == 0 && i != days){//是否换行填充的判断
                   tbodyHtml += "</tr><tr>";
               }
           }
           $('#tbody'+index).empty();   // 清空原有的内容
           $('#tbody'+index).append(tbodyHtml);   //添加当前月份的日期内容
       }
       for (var i =0; i <5; i++) {
           showcld(i);
       }
   </script>
   </body>
</html>